{% extends 'base.html' %}

{% block body %}

<!-- ===== Alert Messages ===== -->
{% for message in messages %}
<div class="alert alert-success alert-dismissible fade show shadow-sm my-3 mx-3" role="alert">
    <strong>{{ message }}</strong>
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endfor %}

<!-- ===== Hero Carousel ===== -->
<div class="container-fluid px-0">
  <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="static/turf_1.jpg" class="d-block w-100 hero-img" alt="Turf Image 1">
      </div>
      <div class="carousel-item">
        <img src="static/turf_2.jpg" class="d-block w-100 hero-img" alt="Turf Image 2">
      </div>
      <div class="carousel-item">
        <img src="static/turf_3.jpg" class="d-block w-100 hero-img" alt="Turf Image 3">
      </div>
    </div>

    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
      <span class="carousel-control-prev-icon bg-dark rounded-circle p-3" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
      <span class="carousel-control-next-icon bg-dark rounded-circle p-3" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>
</div>

<!-- ===== Welcome Section ===== -->
<section class="text-center py-5 welcome-section">
  <div class="container">
    <h1 class="fw-bold display-5 text-success">GreenField</h1>
    <h3 class="fw-semibold text-secondary mt-2">Turf Ground • Cafe • Play Station</h3>
    <p class="lead text-muted mt-3">“Live in your world. Play in our GreenField.”</p>

    <div class="mt-4">
      <a href="#" class="btn btn-success btn-lg rounded-pill px-4 py-2 shadow-sm me-2">Book Your Slot</a>
      <a href="#" class="btn btn-outline-success btn-lg rounded-pill px-4 py-2">Learn More</a>
    </div>
  </div>
</section>

<!-- ===== Highlights Section ===== -->
<section class="features-section py-5 bg-light">
  <div class="container">
    <div class="row text-center g-4">
      <div class="col-md-4">
        <div class="card border-0 shadow-sm p-4 feature-card">
          <i class="bi bi-tree-fill fs-1 text-success mb-3"></i>
          <h5 class="fw-bold">Premium Turf Area</h5>
          <p class="text-muted">Enjoy a perfectly maintained 6000 sq. ft. turf designed for every sport lover.</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card border-0 shadow-sm p-4 feature-card">
          <i class="bi bi-cup-hot-fill fs-1 text-warning mb-3"></i>
          <h5 class="fw-bold">Relaxing Cafe Zone</h5>
          <p class="text-muted">Refresh yourself with premium beverages and snacks at our cozy cafe.</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card border-0 shadow-sm p-4 feature-card">
          <i class="bi bi-controller fs-1 text-primary mb-3"></i>
          <h5 class="fw-bold">Play Station Lounge</h5>
          <p class="text-muted">A 400 sq. ft. closed gaming area designed for ultimate fun and competition.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ===== Custom CSS ===== -->
<style>
  /* Carousel Image */
  .hero-img {
    height: 500px;
    object-fit: cover;
    filter: brightness(85%);
  }

  /* Welcome Section */
  .welcome-section {
    background: linear-gradient(135deg, #e8f5e9, #ffffff);
  }

  .welcome-section h1 {
    letter-spacing: 1px;
  }

  /* Buttons */
  .btn-success {
    background-color: #28a745 !important;
    border: none;
  }

  /* Feature Cards */
  .feature-card {
    border-radius: 15px;
    transition: all 0.3s ease-in-out;
  }

  .feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  }

  /* Carousel Controls */
  .carousel-control-prev-icon,
  .carousel-control-next-icon {
    background-size: 60%, 60%;
  }

  @media (max-width: 768px) {
    .hero-img {
      height: 300px;
    }
  }
</style>

{% endblock body %}